/* 05. other css here */

//portfolio css here
.portfolio_section {
    padding: 113px 0 200px;
    @media #{$tablet-device}{
        padding: 38px 0 75px;
    }
    @media #{$large-mobile}{
        padding: 18px 0 54px;
    }
}


.portfolio_messonry_button {
    margin-bottom: 70px;
    @media #{$tablet-device}{
        margin-bottom: 42px;
    }
    @media #{$large-mobile}{
        flex-wrap: wrap;
        margin-bottom: 25px;
    }
    & button{
        font-size: 18px;
        line-height: 32px;
        color: #000000;
        text-transform: capitalize;
        margin-right: 46px;
        padding: 0;
        background: inherit;
        border: 0;
        &:hover{
            color: #ff9900;
        }
        &.active{
            color: #ff9900;
        }
        @media #{$tablet-device}{
            font-size: 16px;
            margin-right: 30px;
        }
        @media #{$large-mobile}{
            font-size: 15px;
            margin-right: 18px;
            line-height: 30px;
        }
        &:last-child{
            margin-right: 0;
        }

    }
}
.single_portfolio {
    margin-bottom: 54px;
    @media #{$tablet-device}{
        margin-bottom: 40px;
    }
    @media #{$large-mobile}{
        margin-bottom: 30px;
    }
    &:hover{
        & .portfolio_text{
            & h3{
                & a{
                    color: $secondary_color;
                    
                }
            }
        }
    }
}
.portfolio_thumb{
    position: relative;
    overflow: hidden;
    & a{
        display: block;
    }
    &:hover{
        & img{
            transform: scale(1.1);
        }
    }
   
}

.portfolio_text{
    padding-top: 32px;
    @media #{$tablet-device}{
        padding-top: 22px;
    }
    @media #{$large-mobile}{
        padding-top: 20px;
    }
    & h3{
        font-size: 30px;
        line-height: 36px;
        font-weight: 700;
        margin-bottom: 0;
        @media #{$desktop-device}{
            font-size: 25px;
            line-height: 30px;
        }
        @media #{$tablet-device}{
            font-size: 22px;
            line-height: 23px;
        }
        @media #{$large-mobile}{
            font-size: 20px;
            line-height: 28px;
        }
        @media #{$small-mobile2}{
            font-size: 18px;
            line-height: 20px;
         }
    }
    & span{
        font-size: 12px;
        line-height: 20px;
        display: inline-block;
        color: #666666;
        text-transform: uppercase;
        margin-bottom: 9px;
    
    }
}
.loding_bar {
    margin-top: 109px;
    @media #{$tablet-device}{
        margin-top: 30px;
    }
    @media #{$large-mobile}{
        margin-top: 10px;
    }
    @media #{$small-mobile2}{
        margin-top: 0;
     }
    & ul{
        & li{
            margin-right: 8px;
            &:last-child{
                margin-right: 0;
            }
            & span{
                width: 3px;
                height: 3px;
                background: #cccccc;
                display: inline-block;
            }
            &  a{
                display: inline-block;
                font-size: 18px;
                line-height: 26px;
                font-weight: 700;
                color: #cccccc;
                text-transform: uppercase;
                letter-spacing: 8px;
                @media #{$tablet-device}{
                    font-size: 16px;
                    letter-spacing: 6px;
                }
                @media #{$large-mobile}{
                    font-size: 13px;
                }

            }
        }
    }
}

// portfolio details css here
.portfolio_details_section{
    padding: 95px 0 68px;
    @media #{$tablet-device}{
        padding: 40px 0 68px;
    }
    @media #{$large-mobile}{
        padding: 15px 0 57px;
    }
}
.portfolio_details_top{
    margin-bottom: 98px;
    @media #{$tablet-device}{
        margin-bottom: 72px;
    }
    @media #{$large-mobile}{
        margin-bottom: 51px;
    }
}
.portfolio_d_info {
    @media #{$large-mobile}{
        flex-direction: column;
        text-align: center;
    }
}
.portfolio_d_title{
    margin-bottom: 124px;
    @media #{$tablet-device}{
        text-align: center;
        margin-bottom: 74px;
    }
    @media #{$large-mobile}{
        text-align: center;
        margin-bottom: 50px;
    }
    & h1{
        font-size: 60px;
        line-height: 74px;
        font-weight: 700;
        margin-bottom: 0;
        padding-left: 185px;
        @media #{$desktop-device}{
            font-size: 48px;
            line-height: 50px;
            padding-left: 123px;
        }
        @media #{$tablet-device}{
            font-size: 40px;
            line-height: 45px;
            padding-left: 0;
        }
        @media #{$large-mobile}{
            font-size: 35px;
            line-height: 40px;
            padding-left: 0;
        }
        @media #{$small-mobile2}{
            font-size: 26px;
        }
    }
}
.portfolio_info_list{
    margin-right: 100px;
    @media #{$desktop-device}{
        margin-right: 40px;
    }
    @media #{$tablet-device}{
        margin-right: 30px;
    }
    @media #{$large-mobile}{
        margin-right: 0;
        margin-bottom: 25px;
    }
    &.list_bottom{
        margin-right: 50px;
        @media #{$desktop-device}{
            margin-right: 40px;
        }
        @media #{$tablet-device}{
            margin-right: 30px;
        }
        @media #{$large-mobile}{
            margin-right: 0;
        }
    }
    &:last-child{
        margin-right: 0;
        @media #{$large-mobile}{
            margin-right: 0;
            margin-bottom: 0;
        }
    }
    &.portfolio__info{
        min-width: 23%;
        @media #{$desktop-device}{
            min-width: 28%;
        }
    }
    & > h2{
        font-size: 30px;
        line-height: 36px;
        font-weight: 600;
        text-transform: uppercase;
        @media #{$tablet-device}{
            font-size: 20px;
            line-height: 28px;
        }
        @media #{$large-mobile}{
            font-size: 22px;
            line-height: 27px;
        }
    }
    & > p{
        font-size: 16px;
        line-height: 30px;
        color: #666666;
        @media #{$tablet-device}{
            font-size: 15px;
            line-height: 26px;
        }
        @media #{$large-mobile}{
            font-size: 14px;
            line-height: 25px
        }
    }
}

.portfolio_info_contact{
    margin-bottom: 30px;
    &:last-child{
        margin-bottom: 0;
    }
    @media #{$tablet-device}{
        margin-bottom: 20px;
    }
    & span{
        font-size: 14px;
        line-height: 22px;
        color: #999999;
        margin-bottom: 15px;
        display: inline-block;
    }
    & p{
        font-size: 16px;
        line-height: 30px;
        text-transform: uppercase;
        @media #{$tablet-device}{
            font-size: 15px;
            line-height: 27px;
        }
    }
}
.portfolio_banner{
    margin-bottom: 140px;
    @media #{$tablet-device}{
        margin-bottom: 75px;
    }
    @media #{$large-mobile}{
        margin-bottom: 60px;
    }
}
.blog_details_blockquote {
    margin-bottom: 225px;
    @media #{$desktop-device}{
        margin-bottom: 120px;
    }
    @media #{$tablet-device}{
        margin-bottom: 65px;
    }
    @media #{$large-mobile}{
        margin-bottom: 50px;
    }
    @media #{$small-mobile2}{
        flex-direction: column;
        text-align: center;
       
    }
}
.blog_blockquote_text{
    padding-left: 146px;
    @media #{$desktop-device}{
        padding-left: 70px;
    }
    @media #{$tablet-device}{
        padding-left: 50px;
    }
    @media #{$large-mobile}{
        padding-left: 35px;
    }
    @media #{$small-mobile2}{
        padding-left: 0;
        padding-top: 18px;
    }
    & h4{
        font-size: 36px;
        line-height: 55px;
        margin-bottom: 98px;
        font-family: $libre;
        letter-spacing: 0;
        @media #{$desktop-device}{
            font-size: 25px;
            line-height: 45px;
            margin-bottom: 50px;
        }
        @media #{$tablet-device}{
            font-size: 20px;
            line-height: 38px;
            margin-bottom: 30px;
        }
        @media #{$large-mobile}{
            font-size: 17px;
            line-height: 32px;
            margin-bottom: 22px;
        }
        @media #{$small-mobile2}{
            font-size: 16px;
            line-height: 29px;
        }
    }
    & p{
        font-size: 16px;
        line-height: 30px;
        color: #999999;
        & span{
            font-weight: 600;
            text-transform: uppercase;
            color: #010101;
        }
    }
}
.blog_blockquote_icon{
    & i{
        font-size: 72px;
        color: #ff9900;
        @media #{$large-mobile}{
            font-size: 45px;
        }
    }
}

.portfolio_d_gallery{
    padding: 146px 0 130px;
    @media #{$tablet-device}{
        padding: 74px 0 41px;
    }
    @media #{$large-mobile}{
        padding: 55px 0 56px;
    }
}
.post__social.port_details_social{
    margin-top: 147px;
    @media #{$desktop-device}{
        margin-top: 60px;
    }
    @media #{$tablet-device}{
        margin-top: 42px;
    }
    @media #{$large-mobile}{
        margin-top: 30px;
    }
    @media #{$small-mobile2}{
        justify-content: center;
    }
    & ul{
        & li{
            & a{
                font-size: 24px;
                @media #{$large-mobile}{
                    font-size: 20px;
                }
                &.facebook{
                    color: #1362c3;
                }
                &.twitter{
                    color: #00bef5;
                }
                &.pinterest{
                    color: #db0101;
                }
                &.linkedin{
                    color: #03518e;
                }
            }
        }
    }
}
.blog_navigation.portfolio_nav{
    margin-bottom: 0;
    padding-bottom: 0;
}
// contact css here
.contact_page_details{
    & .container{
        max-width: 1005px;
    }
    margin-bottom: 190px;
    @media #{$tablet-device}{
        margin-bottom: 80px;
    }
    @media #{$large-mobile}{
        margin-bottom: 60px;
    }
}

.contact_map {
    @media #{$tablet-device}{
        margin-bottom: 67px;
    }
    @media #{$large-mobile}{
        margin-bottom: 44px;
    }
    @media #{$small-mobile2}{
        margin-bottom: 48px;
    }
    & iframe{
        height: 805px;
        width: 100%;
        @media #{$laptop-device}{
            height: 600px;
        }
        @media #{$desktop-device}{
            height: 500px;
        }
        @media #{$tablet-device}{
            height: 350px;
        }
        @media #{$large-mobile}{
            height: 300px;
        }
    }
}

.form_input_inner {
    @media #{$large-mobile}{
        flex-wrap: wrap;
    }

}
.contact_form{
    & h3{
        font-size: 30px;
        line-height: 40px;
        font-weight: 600;
        margin-bottom: 40px;
        @media #{$tablet-device}{
            font-size: 25px;
            line-height: 26px;
            margin-bottom: 30px;
        }
        @media #{$large-mobile}{
            font-size: 24px;
            line-height: 30px;
            margin-bottom: 29px;
        }
    }
}

.form_input{
    width: 33.33%;
    margin-right: 20px;
    margin-bottom: 20px;
    &:last-child{
        margin-right: 0;
    }
    @media #{$large-mobile}{
        width: 100%;
        margin-right: 0;
    }
    & input{
        width: 100%;
        height: 43px;
        padding: 0 18px;
        &:focus{
            border-color: #ccc !important;
            color: #000000;
        }
        &:focus::-webkit-input-placeholder{
            color: #000000;
        }
    }
    
}

.form_textarea{
    & textarea{
        width: 100%;
        padding: 10px 18px;
        height: 198px;
        resize: none;
        @media #{$tablet-device}{
            height: 170px;
        }
        @media #{$large-mobile}{
            height: 120px;
        }
        &:focus{
            border-color: #ccc !important;
            color: #000000;
        }
        &:focus::-webkit-input-placeholder{
            color: #000000;
        }
    }
}
.contact_info{
    margin-bottom: 148px;
    @media #{$tablet-device}{
        margin-bottom: 73px;
    }
    @media #{$large-mobile}{
        margin-bottom: 23px;
    }
}
.contact_info_title {
    margin-bottom: 58px;
    @media #{$tablet-device}{
        margin-bottom: 30px;
    }
    @media #{$large-mobile}{
        margin-bottom: 30px;
    }
    & h3{
        font-size: 30px;
        line-height: 45px;
        font-weight: 700;
        margin-bottom: 0;
        @media #{$tablet-device}{
            font-size: 24px;
            line-height: 38px;
        }
        @media #{$large-mobile}{
            font-size: 22px;
            line-height: 35px;
        }
        @media #{$small-mobile2}{
            font-size: 20px;
            line-height: 30px;
        }
    }
}
.contact_info_inner {
    @media #{$large-mobile}{
        flex-wrap: wrap;
    }
}
.contact_info_list{
    width: 33.33%;
    margin-right: 65px;
    position: relative;
    @media #{$tablet-device}{
        margin-right: 30px;
    }
    @media #{$large-mobile}{
        width: 45%;
        margin-right: 40px;
        margin-bottom: 25px;
        &:nth-child(2){
            margin-right: 0;
        }
    }
    @media #{$small-mobile2}{
        width: 100%;
        margin-right: 0;
        text-align: center;
    }
    &:last-child{
        margin-right: 0;
    }
    & h3{
        font-size: 16px;
        line-height: 48px;
        font-weight: 600;
        text-transform: uppercase;
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 23px;
        @media #{$tablet-device}{
            font-size: 16px;
            line-height: 42px;
            margin-bottom: 15px;
        }
        @media #{$large-mobile}{
            font-size: 15px;
            line-height: 40px;
            margin-bottom: 16px;
        }
        & i{
            float: right;
            line-height: 47px;
            font-size: 20px;
            color: #ff9900;
            @media #{$tablet-device}{
                line-height: 40px;
                font-size: 18px;
            }
            @media #{$large-mobile}{
                line-height: 40px;
                font-size: 17px;
            }
        }
    }
    & p{
        font-size: 16px;
        line-height: 30px;
        color: #010101;
        letter-spacing: 0;
        @media #{$tablet-device}{
            font-size: 15px;
            line-height: 27px;
        }
        & a{
            &:hover{
                color: $secondary_color;
            }
        }
    }
}

.form_input_btn {
    margin-top: 43px;
    @media #{$tablet-device}{
        margin-top: 30px;
    }
    @media #{$large-mobile}{
        margin-top: 25px;
    }
}